<%- include('common/header.html')  %>
<link rel="stylesheet" href="index/css/product_details.css">
<style>
  .header {
    background-color: #fff;
  }

  .header_text {
    top: 55%;
  }

  .container_text_content_title>ul {
    padding-bottom: 9px;
  }

  .container_text_content_content {
    display: none;
  }

  .check_on_li {
    display: block;
  }
  .top_back{
    overflow: hidden;
  }
</style>
<!-- 商品详情页面 -->
<!-- 产品详情 -->

<!-- 内容头部的banner开始 -->
<div class="banner_bgc_skyblue">


  <div class="header_banner">
    <div class="header_content">
      <div class="header_text">
        <div class="withe_solid w">
        </div>
        <div class="header_title">
          <h4>产品服务</h4>
        </div>
        <div class="header_text_tot">
          <p><%= detail.pi_title %> </p>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 内容头部的banner结束 -->
<!-- 面包屑 -->
<div class="crumbs">
  <div class="content">
    <div class="crumbs_text">
      <i>当前位置：</i>
      <a href="/"> <span>首页</span></a>

      <i>＞</i>
      <a href="/project"> <span>产品中心</span></a>
      <i>＞</i>
      <a href="/project?id=<%= detail.pc_id %>"> <span><%= detail.pc_name %></span></a>
      <i>＞</i>
      <span><%= detail.pi_name %></span>
    </div>

  </div>
</div>
<!-- 面包屑结束 -->
<!-- 内容部分开始 -->
<div class="top_back">


  <div class="project_content ">
    <div class="pro_content-header row">
      <!-- 缩略图 -->
      <!-- <div class="col-md-1">
    </div> -->
      <div class="thumb_swiper col-md-4">

        <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2">
          <div class="swiper-wrapper">
            <% detail.pi_thumb.forEach(item => { %>
            <div class="swiper-slide">
              <img src=<%= item %> />
            </div>
            <% }) %>



          </div>
          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div>
        </div>
        <div thumbsSlider="" class="swiper mySwiper">
          <div class="swiper-wrapper">
            <!-- <div class="e">
              <img src="/admin/uploads/file-1657731294681.jpg" />
            </div> -->
            <% detail.pi_thumb.forEach(item => { %>
            <div class="swiper-slide">
              <img src=<%= item %> />
            </div>
            <% }) %>
          </div>
        </div>

      </div>
      <!-- 右边内容 -->
      <div class="col-md-1">
      </div>
      <div class="content_text col-md-7">
        <div class="content_text_name">
          <%= detail.pi_name %>
        </div>
        <div class="content_text_title">
          <div>
            <%= detail.pi_title %></div>
        </div>
        <ul class="content_text_button_list">
          <li class="content_text_button content_text_button_left">
            <% if (upTo.pi_id==detail.pi_id) { %>
            <!-- 说明已经没有上一篇了 -->
            <a href="javascript:;">上一篇: <span><%= upTo.pi_name %> </span></a>
            <% } else { %>
            <a href="/productydetails?id=<%= upTo.pi_id %> ">上一篇: <span><%= upTo.pi_name %> </span></a>
            <% } %>
          </li>
          <li class="content_text_button content_text_button_right">
            <% if (upTo.pi_id==detail.pi_id) { %>
            <!-- 说明已经没有下一篇了 -->
            <a href="javascript:;">下一篇: <span><%= upTo.pi_name %> </span></a>
            <% } else { %>
            <a href="/productydetails?id=<%= downTo.pi_id %>">下一篇: <span><%= downTo.pi_name %></span></a>
            <% } %>




          </li>
      </div>
    </div>
  </div>
</div>
<!-- 展示页面部分 -->
<div class="page-content">
  <div class="container">
    <div>
      <div class="row">
        <!-- 为你推荐 -->
        <div class="col-md-3 recommend">
          <h3>为你推荐</h3>
          <!-- 推荐列表 -->
          <ul class="recommend_list">
            <% recommend.forEach(item => { %>
            <li>
              <a href="/productydetails?id=<%= item.pi_id %> ">
                <div>
                  <div>
                    <img src="<%= item.pi_img %> " width="240px" height="145px" alt="">
                    <h4><%= item.pi_name %> </h4>
                  </div>
                </div>
              </a>
            </li>
            <% }) %>




            <!-- 

            <li>
              <div>
                <div>
                  <img src="/admin/uploads/file-1657731294681.jpg" width="240px" height="145px" alt="">
                  <h4>为你推荐 Date</h4>
                </div>
              </div>
            </li>
            <li>
              <div>
                <div>
                  <img src="/admin/uploads/file-1657731294681.jpg" width="240px" height="145px" alt="">
                  <h4>为你推荐 Date</h4>
                </div>
              </div>
            </li>
            <li>
              <div>
                <div>
                  <img src="/admin/uploads/file-1657731294681.jpg" width="240px" height="145px" alt="">
                  <h4>为你推荐 Date</h4>
                </div>
              </div>
            </li> -->
          </ul>
        </div>

        <!-- 详细内容 -->
        <!-- 内容模块下 -->
        <div class="col-md-9 container_text">
          <div class="container_text_content">
            <div class="container_text_content_title">
              <ul>
                <li class="once-on">
                  <a href="javascript:;">详细内容</a>
                </li>
                <li>
                  <a href="javascript:;">规格参数</a>
                </li>
                <li>
                  <a href="javascript:;">包装</a>
                </li>
              </ul>
            </div>
            <!-- 内容模块下的分页内容 -->
            <!-- 第一页 -->
            <div class="tab_content_list">
              <div class="container_text_content_content check_on_li">
                <span>
                  <%- detail.pi_content %>
                </span>
              </div>
              <!-- 第二页 -->
              <div class="container_text_content_content">
                <span>
                  规格参数演1996演示数据演示数据演示数据演示数据，演示数据演示数据演示数据演示数，演示数据演示数据演示数据演示数据演、演示数据演示数据演示数据演。演示数据演，演示数据演示数据演示数据演示数，演示数据演示数据演示数据演示。

                  规格参数演示数据演示数据演示数据演示数据演示数据演示。演示数据
                  “演示数”演示数据演示，演示数据（演示数、演示数据、演示、演示数）演示数据演示数，演示数据演示99.999％。演示数据演示数据演示数Comware演示数据演示数据演示数据演示数据演，演示数据MPLS、QoS、演示数据、演示VPN、演示数据演示数据演示数据，演示数据演示数据演NP/演示数据演示，演示SR演示数据演示数据演示数据演示数据演示数据演示数据演示，演“演示数据”演示数据演示数据演示数据。

                  规格参数演示数MSR演示数据演，演示数据演示数据演示数据演示数。演N-BUS演示数据演OAA演示数据，演示数据演示，演示数据演示数据演示数据，演示数据演示/演示/演示/演示/演示数据，演示All in
                  One演示数据演，演示数据演示数据演示数据。
                </span>
              </div>
              <!-- 第三页 -->
              <div class="container_text_content_content">
                <span>
                  包装演1996演示数据演示数据演示数据演示数据，演示数据演示数据演示数据演示数，演示数据演示数据演示数据演示数据演、演示数据演示数据演示数据演。演示数据演，演示数据演示数据演示数据演示数，演示数据演示数据演示数据演示。

                  包装演示数据演示数据演示数据演示数据演示数据演示。演示数据
                  “演示数”演示数据演示，演示数据（演示数、演示数据、演示、演示数）演示数据演示数，演示数据演示99.999％。演示数据演示数据演示数Comware演示数据演示数据演示数据演示数据演，演示数据MPLS、QoS、演示数据、演示VPN、演示数据演示数据演示数据，演示数据演示数据演NP/演示数据演示，演示SR演示数据演示数据演示数据演示数据演示数据演示数据演示，演“演示数据”演示数据演示数据演示数据。

                  包装 演示数MSR演示数据演，演示数据演示数据演示数据演示数。演N-BUS演示数据演OAA演示数据，演示数据演示，演示数据演示数据演示数据，演示数据演示/演示/演示/演示/演示数据，演示All in
                  One演示数据演，演示数据演示数据演示数据。
                </span>
              </div>
            </div>

          </div>

        </div>
      </div>
    </div>
  </div>
</div>
<!-- 展示页面部分 -->

</div>
<!-- 内容部分结束 -->
<div>
  <%- include('common/footer.html')  %>

</div>
<script src="/index/lib/swiper-bundle.min.js"></script>

<script>
  var swiper = new Swiper(".mySwiper", {
    loop: true,
    spaceBetween: 10,
    slidesPerView: 4,
    freeMode: true,
    watchSlidesProgress: true,
  });
  var swiper2 = new Swiper(".mySwiper2", {
    loop: true,
    spaceBetween: 10,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    thumbs: {
      swiper: swiper,
    },
  });

  // 详情模块内容实现跳转分页
  $(function () {
    $('.container_text .container_text_content .container_text_content_title ul li').click(function () {
      if ($(this).hasClass('once-on')) {
        return
      }
      var $parent = $(this).parent()
      var $tab_content_list = $('.tab_content_list')


      $('.once-on', $parent).removeClass('once-on');
      $('.check_on_li', $tab_content_list).removeClass('check_on_li');
      $(this).addClass('once-on');
      $('.container_text_content_content', $tab_content_list).eq($(this).index()).addClass('check_on_li');
      // console.log($('.container_text_content_content', $tab_content_list).eq($(this).index()));
    })
  })
</script>